<template>
  <div id="tab-bar">
    <div class="tab-bar-item" @click="currentIndex = item.index" :class="{active:currentIndex===item.index}" v-for="item in titles" :key="item.index">
      <router-link :to="item.path" tag="span" style="display: block">{{item.title}}</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TabBar",
    data() {
      return {
        currentIndex: 1,
        titles: [{
            index: 1,
            path: '/Home/appointment/notComing',
            title: '今日预约-未到店'
          },
          {
            index: 2,
            path: '/Home/appointment/alreadyComing',
            title: '今日预约-已到店'
          },
          {
            index: 3,
            path: '/Home/appointment/onceComing',
            title: '往日预约'
          }
        ]
      }
    },
  }
</script>

<style scoped>
  #tab-bar {
    display: flex;
    background-color: white;
    line-height: 49px;
  }

  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    box-sizing: border-box;
    font-weight: 600;
    color: rgb(114,114,114);
  }

  .active {
    color: rgb(60, 154, 255) !important;
    border-bottom: 3px solid rgb(60, 154, 255) !important;
  }
</style>